<template>
    <div class="addProject business-workAdd" v-loading="loading">
        <div class="top">
            <div class="top_row1">
                <div class="top_row1_num">{{params.boxCode}}</div>
                <div class="top_row1_status" :class="addForm.printCodeCn=='已作废'? 's3':'s0'">
                    {{addForm.printCodeCn}}</div>
            </div>
            <div style="display: flex;justify-content: space-between">
                <div class="formRow">
                    <div class="label">
                        打印人:
                    </div>
                    <div class="value">
                        张浩 2024-01-01 09:09:09
                    </div>
                </div>
                <div class="formRow" v-if="addForm.printCodeCn=='已作废'">
                    <div class="label">
                        作废人:
                    </div>
                    <div class="value">
                        {{addForm.voidName}} {{addForm.voidTimeFt}}
                    </div>
                </div>
            </div>
            

        </div>
        <div class="center" v-if="addForm.printCodeCn!=='已作废'">
            <div class="formRow">
                <div class="label">
                    品类:
                </div>
                <div class="value">
                </div>
            </div>
            <div class="formRow">
                <div class="label">
                    规格:
                </div>
                <div class="value">
                </div>
            </div>
            <div class="formRow">
                <div class="label">
                    单件万支:
                </div>
                <div class="value">
                </div>
            </div>
        </div>
        <div class="bottom" v-if="addForm.printCodeCn!=='已作废'">
            <div class="bottom_left">
                <div class="bottom_img">
                    <img src="@/assets/back_manage_img/rk.png" alt="">
                    入库
                </div>
                <div class="formRow">
                    <div class="label">
                        入库号:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        入库类型:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        机台号:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        入库人:
                    </div>
                    <div class="value">
                    </div>
                </div>
            </div>
            <div class="bottom_right">
                <div class="bottom_img">
                    <img src="@/assets/back_manage_img/ck.png" alt="">
                    出库
                </div>
                <div class="formRow">
                    <div class="label">
                        出库号:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        出库类型:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        订单号:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        客户:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        发货单号:
                    </div>
                    <div class="value">
                    </div>
                </div>
                <div class="formRow">
                    <div class="label">
                        出库人:
                    </div>
                    <div class="value">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['editData', 'type'],
        data() {
            return {
                loading:false,
                queryForm: {
                    boxCode: ''
                },
                addForm: {
                    boxCode: '',
                    printCode: '',
                    codeStatus: '',
                    codeStatusCn: '',
                    printUserName: '',
                    userName: '',
                },
                rules: {

                },
                time: '',
                flag: false,
                state: '',
                params: {

                }
            }
        },
        methods: {
            getList() {
                
                // this.flag = true;
                let self = this;
                self.loading = true;
                self.$http({
                    url: "/jinl/box/getBoxManageListById",
                    method: "post",
                    data: JSON.stringify({ boxCode: self.editData.boxCode, type: self.editData.codeStatus }),
                    dataType: 'json',
                    contentType: 'application/json',
                }).then(resp => {
                    self.loading = false;
                    if (resp.success) {
                        this.params = resp.result;
                    } else {
                        self.$message.error(resp.message);
                    }

                });
            },
            searchReset() { },
            submitForm(val, type) {
                let self = this;
                self.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        self.$eventBus.$emit("updateWorkList");
                    } else {
                        return false;
                    }
                });
            },
        },

        watch: {

            editData(val) {
                this.addForm = val;
                 this.getList();
            },

        },

        mounted() {
           
        },
    }
</script>
<style lang="scss" scoped>
    @import "@/style/SearchTop.scss";
    @import "@/style/dialog.scss";

    .Search_Top {
        margin-bottom: 30px;

        .search_list {
            width: 240px !important;

            .input_flex {
                ::v-deep .el-input__inner {
                    text-align: center;
                    width: 220px !important;
                }
            }
        }
    }


    .top_row1,
    .formRow {
        display: flex;
        align-items: center;
    }

    .formRow {
        margin-bottom: 15px;
    }

    .label {
        font-size: 14px;
        color: #808080;
        width: 80px;
    }

    .value {
        font-size: 14px;
        color: #333;
    }

    .top {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #A6A6A6;
        position: relative;

        .pr {
            position: absolute;
            top: 5px;
            right: 30px;
            width: 100px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: #FF5050;
            border-radius: 15px;
            cursor: pointer;
        }

        .formRow {
            margin-top: 10px;
            margin-bottom: 15px;
        }

        .top_row1_num {
            font-size: 32px;
        }

        .top_row1_status {
            margin-left: 30px;
            width: 80px;
            height: 25px;
            line-height: 25px;
            border-radius: 15px;
            text-align: center;
        }

        .s0 {
            border: 1px solid #C7601A;
            background-color: #F6E4D9;
            color: #C55A11;
        }

        .s1 {
            border: 1px solid #3BC2F4;
            background-color: #D6F2FD;
            color: #00B0F0;
        }

        .s2 {
            border: 1px solid #15B65E;
            background-color: #D6F2E3;
            color: #00B050;
        }

        .s3 {
            border: 1px solid #848484;
            background-color: #EBEBEB;
            color: #808080;
        }




    }

    .center {
        margin-top: 30px;
    }

    .bottom {
        margin-top: 30px;
        display: flex;
        /* align-items: center; */

        .bottom_left,
        .bottom_right {
            flex: 1;

            .bottom_img {
                color: #1296DE;
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 20px;
            }

            img {
                width: 30px;
                margin-right: 10px;
            }
        }
    }

    .none {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100px;
        }
    }

    .flexAlignCenter {
        margin-top: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #999;

        img {
            margin-bottom: 20px;
            width: 50px;
        }
    }
</style>